<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!--********************************************************************
* 该示例需要引入 
* mapbox-gl-enhance (https://iclient.supermap.io/web/libs/mapbox-gl-js-enhance/1.12.1-12/mapbox-gl-enhance.js)
*********************************************************************-->
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <title data-i18n="resources.title_websymbol_landuseOfJingjin"></title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: fixed;
      top: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script type="text/javascript" include="bootstrap,widgets.alert" src="../js/include-web.js"></script>
  <script type="text/javascript" include="mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
  <script>
    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
    var serviceUrl = host + "/iserver/services/map-jingjin/rest/maps/京津地区土地利用现状图";
    var map = new mapboxgl.Map({
      container: "map",
      style: {
        "sources": {
          "raster-tiles": {
            "tiles": [
              serviceUrl
            ],
            "type": "raster",
            "rasterSource": "iserver",
            "tileSize": 256
          },
          "jingjin": {
            "tiles": [
              serviceUrl + "/tileFeature.mvt?z={z}&x={x}&y={y}"
            ],
            "type": "vector"
          }
        },
        "name": "京津地区土地利用现状图",
        "layers": [{
          "id": "simple-tiles",
          "type": "raster",
          "source": "raster-tiles"
        }],
        "version": 8
      },
      center: [116.85, 40],
      zoom: 7,
      crs: "EPSG:4326"
    });

    // 添加土地利用图层
    var createLandUseLayer = function () {
      map.addLayer({
        "id": "Landuse_R@Jingjin#fill",
        "source": "jingjin",
        "source-layer": "Landuse_R@Jingjin",
        "type": "fill",
        "symbol": [
          "match",
          ["get", "LANDTYPE"],
          "草地", "polygon-955877", //牧草地
          "城市", "polygon-955872", // 特殊用地
          "灌丛", "polygon-955395", // 绿地(深)2
          "旱地", "polygon-955451", // 亮灰色
          "湖泊水库", "polygon-955875", //水库水面
          "经济林", "polygon-955549", //经济林
          "沙漠", "polygon-955529", //生诸石
          "水浇地", "polygon-955548", //淡黄色
          "水田", "polygon-955523", // 茶色
          "用材林", "polygon-955537", //森林绿
          "沼泽", "polygon-955399", //其他未利用地
          "polygon-0" //其他
        ]
      });
      map.addLayer({
        "id": "Landuse_R@Jingjin#line",
        "source": "jingjin",
        "source-layer": "Landuse_R@Jingjin",
        "type": "line",
        "paint": {
          "line-width": 0.38,
          "line-color": "rgba(74,74,74,1.00)"
        }
      });
    };

    map.on("load", function () {
      // 配置基础路径
      new mapboxgl.supermap.WebSymbol().init({ basePath: window.exampleWebSymbolBasePath });
      // 批量加载Web符号
      var symbolIds = [
        "polygon-955877",
        "polygon-955872",
        "polygon-955395",
        "polygon-955451",
        "polygon-955875",
        "polygon-955549",
        "polygon-955529",
        "polygon-955548",
        "polygon-955523",
        "polygon-955537",
        "polygon-955399",
        "polygon-0"
      ];
      map.loadSymbol(symbolIds, function (_error, symbols) {
        symbols.forEach((symbol, index) => {
          symbol && map.addSymbol(symbolIds[index], symbol);
        });
        createLandUseLayer();
      });
    });

  </script>
</body>

</html>